<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="合同号,客户名"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>

        <el-form-item label="签约开始时间：" prop="signTimeBegin">
          <el-date-picker
            v-model="query.signTimeBegin"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="签约结束时间：" prop="signTimeEnd">
          <el-date-picker
            v-model="query.signTimeEnd"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结清状态:">
          <el-select v-model="query.isOver" placeholder="请选择">
            <el-option
              v-for="item in statesList"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              @click="orderExport"
              v-if="userInfoExport"
              >导出</el-button
            >
            <!-- <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              >标记为已线下补签</el-button
            > -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeFun"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      />
      <el-table-column
        prop="contractNum"
        label="合同ID"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="productId"
        label="业务线"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signUpId"
        label="客户姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="客户身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="belongName"
        label="归属经纪人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="channelName"
        label="归属渠道客服"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractName"
        label="合同名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="hashValue"
        label="HASH值"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signStatus"
        label="签约状态"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isStages"
        label="是否分期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="alreadyStages"
        label="已还期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="chinapayStatus"
        label="银联签约状态"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signCode"
        label="签约验证码"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="isVideo"
        label="证据链-视频"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isIdCard"
        label="证据链-身份证照"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="bankCardNumber"
        label="银行卡号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="name"
        label="证据链-实时验证码"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="agreeId"
        label="同意人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="printNum"
        label="打印次数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="生成日期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signTime"
        label="签约日期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="更新日期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isOverText"
        label="结清状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div
            :style="{
              color: scope.row.isOverText == '已结清' ? 'red' : 'black',
            }"
          >
            {{ scope.row.isOverText }}
          </div>
          <!-- <div
            :style="{ color: scope.row.isOverText ? 'red' : 'red' }"
            v-if="scope.row.isOverText == 未结清"
          >
            {{ scope.row.isOverText }}
          </div> -->
        </template>
      </el-table-column>

      <el-table-column
        prop="overTime"
        label="结清时间"
        align="center"
        :row-class-name="tableRowClassName"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <!-- <el-button
            type="text"
            size="small"
            @click="printingFun(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >打印</el-button
          > -->
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="viewStagingFun(scope.row)"
            style="color: #409eff"
            v-no-more-click
            >查看分期</el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="loanTimeFun(scope.row)"
            style="color: #409eff"
            v-no-more-click
            >放款时间</el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="viewVideoFun(scope.row)"
            style="color: #409eff"
            v-no-more-click
            >查看视频</el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="viewImgFun(scope.row)"
            style="color: #409eff"
            v-no-more-click
            >查看身份证</el-button
          >
          <!-- <el-popconfirm
            title="确定重新签约吗？"
            @onConfirm="reSigningFun(scope.$index, scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              v-no-more-click
              >重新签约</el-button
            >
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="分期明细"
      :visible.sync="electronicDia"
      width="70%"
      top="30px"
    >
      <electronic
        :diaId="diaId"
        :electronicDia="electronicDia"
        v-if="electronicDia"
        v-on:electronicDia="closeDialog($event)"
      ></electronic>
    </el-dialog>
    <el-dialog
      title="添加放款时间"
      :visible.sync="loanTimeDia"
      width="25%"
      top="30px"
    >
      <loanTime
        :diaId="diaId"
        :loanTimeDia="loanTimeDia"
        v-if="loanTimeDia"
        v-on:loanTimeDia="loanTimeDiaDialog($event)"
      ></loanTime>
    </el-dialog>
    <!-- 查看视频 -->
    <el-dialog
      title="查看视频"
      :visible.sync="viewVideoDia"
      width="50%"
      top="30px"
      :before-close="videoImgClear"
    >
      <video
        :src="videoUrl"
        type="video/mp4"
        controls="controls"
        autoplay="autoplay"
        style="width: 80%; height: 600px"
      ></video>
    </el-dialog>
    <!-- 查看身份证 -->
    <el-dialog
      title="查看身份证"
      :visible.sync="viewImgDia"
      width="50%"
      top="30px"
      :before-close="videoImgClear"
    >
      <img :src="imgUrl" style="width: 80%" />
    </el-dialog>
  </div>
</template>

<script>
import { getPageContract, getTwoClassified } from "../../../src/assets/js/api";
import electronic from "../../components/electronicContract/Electronic";
import loanTime from "../../components/electronicContract/LoanTime";

import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "ElectronicContract",
  components: { electronic, loanTime },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: null,
        signTimeBegin: "",
        signTimeEnd: "",
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      diaId: "",
      electronicDia: false,
      loanTimeDia: false,
      ids: [],
      fileParmas: {
        keyWord: null,
        signTimeBegin: "",
        signTimeEnd: "",
        ids: [],
      },
      videoUrl: "",
      imgUrl: "",
      viewVideoDia: false,
      viewImgDia: false,
      statesList: [],
      golbalPermissions: [],
    };
  },
  created() {
    this.getList();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function () {
      return checkPermiss(
        "business:sign:exportContract",
        this.golbalPermissions
      );
    },
  },
  methods: {
    //   获取数据
    getList() {
      getPageContract(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
      getTwoClassified("isOver_status").then((res) => {
        this.statesList = res.data;
      });
    },

    //   打印
    printingFun() {},
    viewVideoFun(row) {
      this.videoUrl = row.isVideo;
      this.viewVideoDia = true;
    },
    viewImgFun(row) {
      this.imgUrl = row.isIdCard;
      this.viewImgDia = true;
    },
    videoImgClear(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.videoUrl = "";
          this.imgUrl = "";
        })
        .catch(() => {});
    },
    // 查看分期
    viewStagingFun(row) {
      this.electronicDia = true;
      this.diaId = row.id;
    },
    // 重新签约
    reSigningFun() {},
    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.isOver = "";
      this.query.keyWord = "";
      this.query.signTimeBegin = "";
      this.query.signTimeEnd = "";

      this.getList();
    },
    loanTimeDiaDialog(msg) {
      this.loanTimeDia = msg;
    },
    //关闭弹窗
    closeDialog(msg) {
      this.electronicDia = msg;
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    // 添加放款时间
    loanTimeFun(row) {
      this.loanTimeDia = true;
      this.diaId = row.id;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row, rowIndex);
    },
    // 批量
    getRowKey(row) {
      return row.id;
    },

    changeFun(row) {
      this.ids = row.map((item) => item.id);
    },
    orderExport() {
      this.fileParmas.keyWord = this.query.keyWord;
      this.fileParmas.signTimeBegin = this.query.signTimeBegin;
      this.fileParmas.signTimeEnd = this.query.signTimeEnd;
      this.fileParmas.ids = this.ids;
      expotOut(
        "get",
        "/business/sign/exportContract",
        this.fileParmas, // 导出请求参数
        "电子合同分期表" // 导出文件名字
      );
    },
  },
};
</script>

<style scoped type="less">
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
.query ::v-deep .el-input__inner
{
    height: 32px;
}
.query ::v-deep .el-input__icon
{
    line-height: 32px;
}

.query ::v-deep .vue-treeselect__control
{
    line-height: 30px;  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder
{
    line-height: 30px;
}
::v-deep .btn .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.box
{
    position: relative;  padding: 20px 20px 50px 20px;  background: #fff;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}

</style>
